<template>
  <div class="dashboard-content">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="dashboard-cards">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon user-icon">
              <el-icon><User /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">128</div>
              <div class="stat-label">用户总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon athlete-icon">
              <el-icon><UserFilled /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">86</div>
              <div class="stat-label">运动员数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon event-icon">
              <el-icon><Trophy /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">24</div>
              <div class="stat-label">比赛项目</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon score-icon">
              <el-icon><Medal /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">342</div>
              <div class="stat-label">成绩记录</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 公告和快捷操作 -->
    <el-row :gutter="20" class="dashboard-charts">
      <el-col :span="12">
        <el-card title="最新公告">
          <template #header>
            <div class="card-header">
              <span>最新公告</span>
              <el-button type="text" @click="$router.push('/notice')">查看更多</el-button>
            </div>
          </template>
          <div class="notice-list">
            <div class="notice-item">
              <span class="notice-title">运动会报名开始</span>
              <span class="notice-time">2024-09-10</span>
            </div>
            <div class="notice-item">
              <span class="notice-title">比赛项目安排通知</span>
              <span class="notice-time">2024-09-08</span>
            </div>
            <div class="notice-item">
              <span class="notice-title">成绩公示</span>
              <span class="notice-time">2024-09-06</span>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>快捷操作</span>
            </div>
          </template>
          <div class="quick-actions">
            <el-button type="primary" @click="$router.push('/athlete')" v-if="hasPermission('athlete')">
              <el-icon><Plus /></el-icon>
              添加运动员
            </el-button>
            <el-button type="success" @click="$router.push('/event/list')" v-if="hasPermission('event')">
              <el-icon><Plus /></el-icon>
              创建比赛项目
            </el-button>
            <el-button type="warning" @click="$router.push('/score/record')" v-if="hasPermission('score')">
              <el-icon><Edit /></el-icon>
              录入成绩
            </el-button>
            <el-button type="info" @click="$router.push('/notice')" v-if="hasPermission('notice')">
              <el-icon><Bell /></el-icon>
              发布公告
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 用户信息卡片 -->
    <el-row :gutter="20" class="user-info-section">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>用户信息</span>
            </div>
          </template>
          <div class="user-details">
            <p><strong>用户名：</strong>{{ userStore.userInfo?.username || 'N/A' }}</p>
            <p><strong>真实姓名：</strong>{{ userStore.userInfo?.realName || 'N/A' }}</p>
            <p><strong>角色：</strong>{{ userStore.roles?.join(', ') || '普通用户' }}</p>
            <p><strong>权限：</strong>{{ userStore.permissions?.join(', ') || '无特殊权限' }}</p>
            <p><strong>部门：</strong>{{ userStore.userInfo?.department || 'N/A' }}</p>
            <p><strong>班级：</strong>{{ userStore.userInfo?.className || 'N/A' }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { useUserStore } from '@/stores/user'
import {
  User, UserFilled, Trophy, Medal, Plus, Edit, Bell
} from '@element-plus/icons-vue'

const userStore = useUserStore()

// 权限检查 - 取消权限认证，所有登录用户都可以访问
const hasPermission = (permission) => {
  return true
}
</script>

<style scoped>
.dashboard-content {
  padding: 20px;
}

.dashboard-cards {
  margin-bottom: 20px;
}

.stat-card {
  border-radius: 8px;
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 24px;
}

.user-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.athlete-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.event-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.score-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  color: white;
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #303133;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-top: 4px;
}

.dashboard-charts {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notice-list {
  max-height: 200px;
  overflow-y: auto;
}

.notice-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.notice-item:last-child {
  border-bottom: none;
}

.notice-title {
  color: #303133;
  cursor: pointer;
}

.notice-title:hover {
  color: #409EFF;
}

.notice-time {
  color: #909399;
  font-size: 12px;
}

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.quick-actions .el-button {
  flex: 1;
  min-width: 120px;
}

.user-info-section {
  margin-bottom: 20px;
}

.user-details p {
  margin-bottom: 8px;
  color: #606266;
  line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dashboard-cards .el-col {
    margin-bottom: 20px;
  }
  
  .quick-actions .el-button {
    width: 100%;
    margin-bottom: 8px;
  }
}
</style>

